<template>
  <div>
    <log-header></log-header>
    <div :class="$style.box">
      <div style="margin-bottom:30px">
        <el-row style="margin-bottom:30px;">
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">日期：</span>
            <el-date-picker
              v-model="date"
              style="width:55%;"
              type="daterange"
              placeholder="选择日期范围" @change="handleCurrentChange(1)">
            </el-date-picker>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">客服：</span>
            <el-select v-model="helper.value" clearable placeholder="服务客服" @change="handleCurrentChange(1)">
              <el-option
                v-for="item in helper.options"
                :key="item.id"
                :label="item.UserName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">通话类型：</span>
            <el-select v-model="call.value" clearable placeholder="通话类型" @change="handleCurrentChange(1)">
              <el-option
                v-for="(item,index) in call.options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">问题类型：</span>
            <el-select v-model="problem.value" clearable placeholder="问题类型" @change="handleCurrentChange(1)">
              <el-option
                v-for="(item,index) in problem.options"
                :key="index"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row :gutter="20" >
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">处理情况：</span>
            <el-select v-model="handle.value" clearable placeholder="处理情况" @change="handleCurrentChange(1)">
              <el-option
                v-for="(item,index) in handle.options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">通话时长：</span>
            <el-input v-model="callNum1" placeholder="" style="width:27%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
            -
            <el-input v-model="callNum2" placeholder="" style="width:26%;" @keyup.enter.native="handleCurrentChange(1)"></el-input>
          </el-col>
          <el-col :span="6">
            <span style="width:28%;text-align:right;float:left;line-height:36px;">内容：</span>
            <el-input v-model="content" placeholder="请输入内容" @keyup.enter.native="handleCurrentChange(1)" style="width:220px;"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleCurrentChange(1)">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="cU_ser"
          label="用户名"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <span :class="$style.click" @click="$router.push({ path: `/vip-manage/detail/${scope.row.userId}/jbxx` })" >{{scope.row.cU_ser}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          align="center"
          min-width="150">
          <template slot-scope="scope">
            <span @click="callPhone(scope.row.cMtel)" style="cursor:pointer"><img src="../../images/phone.png">{{ scope.row.cMtel && scope.row.cMtel.substr(0,3)+"****"+scope.row.cMtel.substr(7) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          align="center"
          label="关联号码">
          <template slot-scope="scope">
            <span @click="callPhone(scope.row.relevanttel)" style="cursor:pointer"><img src="../../images/phone.png">{{ scope.row.relevanttel && scope.row.relevanttel.substr(0,3)+"****"+scope.row.relevanttel.substr(7)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          align="center"
          prop="kfgroup"
          label="客服组">
        </el-table-column>
        <el-table-column
          min-width="100"
          align="center"
          prop="kfname"
          label="服务客服">
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="id"
          align="center"
          label="受理单号">
        </el-table-column>
        <el-table-column
          min-width="150"
          prop="yiji"
          align="center"
          label="问题类型">
        </el-table-column>
        <el-table-column
          min-width="80"
          prop="thlx"
          align="center"
          label="通话类型">
        </el-table-column>
        <el-table-column
          min-width="100"
          align="center"
          label="通话内容">
          <template slot-scope="scope">
            <span :class="$style.click" @click="dialog(scope.$index)">点击查看</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop = 'state'
          align="center"
          label="处理情况">
        </el-table-column>
        <el-table-column
          min-width="200"
          prop="ttpsj"
          align="center"
          label="时间">
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="thsj"
          align="center"
          label="通话时长">
        </el-table-column>
        <el-table-column
          min-width="80"
          prop="fstate"
          align="center"
          label="排队状态">
          <template slot-scope="scope">
            <span>{{ scope.row.fstate == 1 ? '成功' : '失败' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          min-width="200"
          prop="pdhs"
          label="排队耗时">
        </el-table-column> -->
        <el-table-column
          min-width="100"
          prop="xlsj"
          align="center"
          label="响铃时间">
          <template slot-scope="scope">
            {{scope.row.xlsj || 0}}s
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          prop="myd"
          align="center"
          label="满意度">
          <template slot-scope="scope">
            <span>{{ scope.row.myd == 0 ? '未按键' : scope.row.myd == 1 ? '非常满意' : scope.row.myd == 2 ? '基本满意' : scope.row.myd == 3 ? '不满意' : '未进行满意度调查' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="130"
          align="center"
          label="通话录音">
          <template slot-scope="scope">
            <div v-if="scope.row.recordfile">
              <a 
              :href="scope.row.deviceType===0?('http://wznb.wsloan.com:8888/telrecord/main/listentovoice?date=/media/sda/voice/'+ (scope.row.recordfile ? scope.row.recordfile.slice(0, 8) :'' )+ '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '') +'.wav'): ('http://report.wsloan.com:8888/record/'+scope.row.recordfile)"
               target="_blank" 
              :class="$style.click">播放</a>
                <a :href="'http://122.228.132.78:1980/main/download?path=/media/sda/voice/'+(scope.row.recordfile? scope.row.recordfile.slice(0, 8) :'')  + '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '')+'.wav'" :class="$style.click" v-if="scope.row.recordfile">下载</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 30px 0;float:right;">
        <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="total">
        </el-pagination>
      </div>
      <el-dialog title="通话内容" :visible.sync="dialogTableVisible" size="tiny">
        {{remarkContent}}
      </el-dialog>
    </div>

  </div>
</template>

<script>
import LogHeader from '../../components/header.vue'
import { dateFormat } from 'vux'
import {callout} from '../../../../config/mixin'
export default {
  components: {
    LogHeader
  },
  mixins: [callout],
  data() {
    return {
      date:[
        dateFormat(new Date(), 'YYYY-MM-DD'),
        dateFormat(new Date(), 'YYYY-MM-DD')
      ],
      helper:{
        options: [],
        value: ''
      },
      call:{
        options: [{
          label: '呼入',
          value: 'ring'
        },{
          label: '转接',
          value: 'transfer'
        },{
          label: '呼出',
          value: '1'
        },{
          label: '回访',
          value: 'huifan'
        },{
          label: '未接听',
          value: 'noanswer'
        }],
        value: ''
      },
      problem:{
        options: [{
          label: '内容',
          value: '内容'
        },{
          label: '财币商城',
          value: '财币商城'
        },{
          label: '产品优化',
          value: '产品优化'
        }],
        value: ''
      },
      handle:{
        options: [{
          label: '完成',
          value: '完成'
        },{
          label: '转工单',
          value: '转工单'
        }],
        value: ''
      },
      lineUp:{
        options: [{
          label: '成功',
          value: '1'
        },{
          label: '失败',
          value: '2'
        }],
        value: ''
      },
      satisfied:{
        options: [{
          label: '未按键',
          value: '0'
        },{
          label: '非常满意',
          value: '1'
        },{
          label: '基本满意',
          value: '2'
        },{
          label: '不满意',
          value: '3'
        },{
          label: '未进行满意度调查',
          value: '44'
        }],
        value: ''
      },
      callNum1: '',
      callNum2: '',
      content: '',
      tableData:[{
      }],
      dialogTableVisible: false,
      gridData:[],
      remarkContent: '',
      page: 1,
      pageSize: 10,
      total: null,
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.getUserInfo
    },
    kf () {
      return this.$store.getters.getKf
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.getTableData(val)
    },
    async getTableData (page=1) {
      if(!this.date){
        this.$toast({
          message:'请务必填写日期'
        })
        return
      }
      let {data} = await this.$get(this,{api:'ajaxapi/callinfolist.do',data: {
          id: this.userInfo.id,
          adminid: this.helper.value,
          starttime: this.date && dateFormat(this.date[0], 'YYYY-MM-DD'),
          endtime: this.date && dateFormat(this.date[1], 'YYYY-MM-DD'),
          myd: this.satisfied.value,
          ccallinaction: this.call.value,
          yiji: this.problem.value,
          state: this.handle.value,
          fstate: this.lineUp.value,
          neirou: this.content,
          sjc_s: this.callNum1,
          sjc_e: this.callNum2,
          UserName: this.userInfo.userName,
          UserGroupId: this.userInfo.userGroupId,
          duty: this.userInfo.duty || '',
          isAdmin: this.userInfo.isAdmin,
          page,
          pagesize: this.pageSize
        }
      })
      if (data.state === 0) {
        this.tableData = data.content.data;
        this.total = data.content.num;
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    async getQue1(){
      try{
        const {data} = await this.$get(this,{
          api: 'ajaxapi/loadProblemTypes1.do'
        })
        if(data.state === 0){
          this.problem.options = data.content
          return
        }
      }catch(e){
        this.$warn('系统ajaxapi/loadProblemTypes1.do接口报错')
      }
    },
    dialog (index) {
      this.dialogTableVisible =true;
      this.remarkContent = this.tableData[index].callcontent;
    },
    callPhone (phone) {
      // 判断是省内，还是省外
      this.$get(this,{api:'ajaxapi/isFouWz.do',data: {
          mobile: phone,
          yhm: this.userInfo.usertel
        }
      }).then(({data})=>{
        if (data.state === 0) {
          this.$confirm({
            message: '确认拨打？',
            success: ()=>{
              this.callout(data.content)
            }
          })
        }
      })
    }
  },
  mounted() {
    this.helper.options = this.kf;
    this.getTableData()
    this.getQue1()
  }
}
</script>

<style lang="scss" module>
 .box {
    background: #fff;
    padding: 20px;
    border: 1px solid #dddfe6;
 }
.click {
   color: #5394fc;
   text-decoration: underline;
   cursor: pointer;
}
</style>


